<template>
	<view class="order">
		<u-sticky>
			<view class="topcont">
				<view class="search">
					<view class="searchinner">
						<u--input shape="circle" v-model="qujianma" prefixIcon="search" @confirm="handleConfirm"
							@clear="handleClear" placeholder="取件码" border="surround" clearable></u--input>
					</view>

				</view>
				<view class="tab">
					<u-tabs :current="active" :list="tablist" @change="handleChangeTab"></u-tabs>
				</view>
			</view>

		</u-sticky>

		<view class="cont">
			<view class="inner">
				<view class="have" v-if="orderList.length">
					<view class="cloum" v-for="(item,index) in orderList" :key="index">
						<view class="cloumn-top">
							<view class="orderno">
								单号：{{item.orderno}}
							</view>
							<view class="status" v-if="item.status===2">
								待领取
							</view>
							<view class="status" v-if="item.status===3">
								已领取
							</view>
						</view>
						<view class="quhuoma">
							<view class="tag">
								<u-tag text="到店自提" size="mini"></u-tag>
							</view>
							<view class="ma">
								{{item.qujianma}}
							</view>
						</view>
						<view class="cloumn-middle">
						</view>
						<view class="mendian">
							<view class="name">
								{{item.nickname||'-'}}
							</view>
							<view class="xx">
								{{item.phone}}
							</view>
							
						</view>
						<view class="cloumn-bottom">
							<view class="info">
								<view class="name">
									{{item.name}}
								</view>
								<view class="price">
									<view class="">
										￥
									</view>
									<view class="val">
										{{item.price}}
									</view>
								</view>
							</view>
							<view class="btncont">
								<!-- <view class="cancelbtn commonbtn" v-if="item.status===1" @click="handleCancleOrder(item)">
								                                        取消订单
								                                    </view>
								                                    <view class="cancelbtn commonbtn" v-if="item.status===2||item.status===3"
								                                        @click="handleTuikuan(item)">
								                                        申请退款
								                                    </view> -->
								<view class="confirmbtn commonbtn" v-if="item.status===2" @click="handlelinqu(item)">
									领取
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>

				<view class="none" v-else>
					<u-empty mode="order"></u-empty>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				status: 'nomore',
				currentPage: 1,
				totalPage: 0,
				pageSize: 20,
				orderList: [],
				tablist: [{
						name: '全部'
					},
					{
						name: '待领取'
					},
					{
						name: '已领取'
					}
				],
				qujianma: ''
			};
		},

		onShow() {
			this.getList()
		},
		onReachBottom() {

			this.loadData()
		},
		methods: {
			handlelinqu(data) {
				uni.showModal({
					title: '提示', // 标题
					content: '确定领取吗?', // 提示内容
					labelColor: '#3385e3', // 确认按钮文字颜色
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确认", // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true

					success: (res) => {
						if (res.confirm) {
							//点击确定之后执行的代码
							uni.showLoading({
								mask: true,
							})
							this.$req.post('/shanghu/blockorderlq', {
								id: data.id
							}).then((res) => {
								uni.hideLoading()
								if (res.data.code === 0) {
									uni.showToast({
										mask: true,
										icon: 'none',
										title: '领取成功'
									})
									this.getList()
								} else {
									uni.showToast({
										mask: true,
										icon: 'none',
										title: res.data.msg
									})
								}
							})
						} else {
							//点击取消之后执行的代码
						}
					}
				});
			},
			getStatus() {
				let status = 0
				switch (this.active) {
					case 0:
						status = 0;
						break;
					case 1:
						status = 2;
						break;
					case 2:
						status = 3;
						break;
				}
				return status
			},
			handleChangeTab(data) {
				this.active = data.index
				this.qujianma = ''
				this.getList()
			},
			handleConfirm() {
				this.getList()
			},
			handleClear() {
				this.qujianma = ''
				this.getList()
			},
			getList() {
				this.currentPage = 1
				let req = {
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					qujianma: this.qujianma,
					status: this.getStatus(),
					pageNo: this.currentPage,
					pageSize: this.pageSize
				}
				uni.showLoading({

				})
				this.$req.post('/shanghu/blockorders', req).then((res) => {
					uni.hideLoading()
					let info = res.data.data

					this.orderList = info.list || []
					this.totalPage = info.totalPage || 0
					if (this.totalPage <= this.currentPage) {
						this.status = 'nomore'
					}

				})


			},
			loadData() {
				if (this.currentPage >= this.totalPage) return;
				this.status = 'loading'
				this.currentPage = ++this.currentPage
				let req = {
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					qujianma: this.qujianma,
					status: this.getStatus(),
					pageNo: this.currentPage,
					pageSize: this.pageSize
				}
				uni.showLoading({

				})
				this.$req.post('/shanghu/blockorders', req).then((res) => {
					uni.hideLoading()
					let info = res.data.data
					this.orderList = [...this.orderList, ...info.list]
					if (this.currentPage >= this.totalPage) {
						this.status = 'nomore'
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		min-height: 100vh;
		background-color: #f5f5f5;
		font-size: 28rpx;
		color: #333;

		.topcont {
			background-color: #fff;

			.search {
				padding: 0 24rpx;

				.searchinner {
					width: 400rpx;
				}
			}
		}

		.cont {
			padding: 30rpx 24rpx 40rpx 24rpx;

			.inner {
				.none {
					padding-top: 10vh;
				}

				.quhuoma {
					background-color: #edf0f2;
					padding: 20rpx;
					border-radius: 8rpx;
					margin-bottom: 20rpx;

					.tag {
						display: inline-block;
					}

					.ma {
						margin-top: 20rpx;
						font-size: 40rpx;
						font-weight: 500;
					}
				}

				.have {
					.cloum {
						background-color: #fff;
						border-radius: 10rpx;
						padding: 0 30rpx 30rpx 30rpx;
						margin-bottom: 30rpx;

						.cloumn-top {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 28rpx 0;

							.status {
								color: #ED2920;
							}
						}

						.cloumn-middle {
							.goods-info {

								// margin-bottom: 20rpx;
								.info-item {
									display: flex;
									justify-content: space-between;
									margin-bottom: 20rpx;

									.info-left {
										flex-shrink: 0;
										width: 160rpx;
										height: 160rpx;
										background-color: #F2F2F2;
										border-radius: 10rpx;
										overflow: hidden;

										.img {
											display: block;
											width: 100%;
											height: 100%;
										}
									}

									.info-right {
										flex: 1;
										padding-left: 18rpx;

										.name {
											font-size: 24rpx;
											font-weight: 500;
											overflow: hidden;
											text-overflow: ellipsis;
											display: -webkit-box;
											-webkit-line-clamp: 2;
											-webkit-box-orient: vertical;
										}

										.desc {
											font-size: 24rpx;
											margin-top: 14rpx;
											color: #979797;
										}

										.priceandnum {
											display: flex;
											align-items: center;
											justify-content: space-between;
											margin-top: 27rpx;

											.price {

												display: flex;
												align-items: baseline;
												color: #2E2D2D;

												.tips {}

												.val {
													font-size: 32rpx;
													font-weight: 600;
												}
											}

											.num {
												font-size: 24rpx;
												color: #979797;
											}
										}
									}
								}
							}
						}

						.mendian {
							padding: 20rpx 0;
							font-size: 30rpx;
							border-bottom: 1px solid #edf0f2;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						.cloumn-bottom {
							padding-top: 20rpx;

							.info {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.name {
									font-size: 30rpx;

								}

								.price {

									display: flex;
									align-items: baseline;
									color: #ED2920;

									.tips {}

									.val {
										font-size: 32rpx;
										font-weight: 600;
									}
								}
							}

							.btncont {
								display: flex;
								justify-content: flex-end;
								align-items: center;
								margin-top: 30rpx;

								.commonbtn {
									padding: 9rpx 32rpx;
									border-radius: 30rpx;
									// border: 1px solid #D0D0D0;
								}

								.confirmbtn {
									background-color: #09f;
									color: #fff;
									margin-left: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>